<template>
    <!--首页轮播图的结构-->
    <el-carousel trigger="click"  pause-on-hover="false" style="width: 100%;margin-top:2vw;" height="30vw">
      <el-carousel-item v-for="(item) in images" :key="item.id">
        <a  :href="item.href" target="_blank">
          <img :src="item.url" alt="/">
          <div class="txt wrap a-m-c">                 
            <h2 style="visibility: visible;">{{item.name}}</h2>                 
            <h3 style="visibility: visible; animation-name: fadeInUp;">{{item.title}}<br></h3>                                    
          </div>
        </a>
      </el-carousel-item>
    </el-carousel>
</template>

<script lang="ts" setup name="Carousel">
import { RouterLink } from 'vue-router';

  
  let images = [{ id:1,name:'等保一体机[安恒]',title:'中小企业过等保，选择比努力重要',url:'https://www.dbappsecurity.com.cn/Upload/image/20210521/20210521093534_5567.jpg',href:'https://www.dbappsecurity.com.cn/product/cloud61.html'},
                { id:2,name:'云web应用防火墙(玄武盾云防护)[安恒]',title:'托管式云端Web安全防护服务',url:'https://www.dbappsecurity.com.cn/Upload/image/20220916/20220916114647_7041.jpg',href:'https://www.dbappsecurity.com.cn/product/cloud123.html'},
                { id:3,name:'明御®数据库审计与风险控制系统[安恒]',title:'累计销量超5万台的数据库审计领域领先产品之一',url:'https://www.dbappsecurity.com.cn/Upload/image/20210517/20210517224200_9252.jpg',href:'https://www.dbappsecurity.com.cn/product/cloud154.html'},
                { id:4,name:'明御®运维审计与风险控制系统（堡垒机）',title:'IT运维内控管理专家，等保合规必备',url:'	https://www.dbappsecurity.com.cn/Upload/image/20210526/20210526102729_3110.jpg',href:'https://www.dbappsecurity.com.cn/product/cloud157.html'}]
</script>

<style scoped lang="scss">
  img{
    width: 100%;
    height: 100%;
  }
  .txt{
    color: white;
  }
  .wrap{
    max-width: 90%;
    margin: auto;
  }
  h2{
    color: white;
  }
  h3{
    color: white;
  }
  .a-m-c{
    position: absolute;
    left:10%;
    top: 50%;
  }
</style>

  